<template>
  <div id="ratio-card" class="grow" flex="~ col justify-center">
    <div
      class="bg-#29292f w-full aspect-ratio-1 rd-1.4 relative"
      flex="~ items-center justify-center"
    >
      <span
        class="absolute w-full bottom--7 font-700 text-3"
        :class="{ activeText: active }"
        flex="~ justify-center"
      >
        {{ ratioText }}
      </span>
      <div
        class="b-2 b-white b-solid rd-1"
        :class="classObj"
        :style="{ aspectRatio: ratioVal(ratio) }"
      ></div>
      <div v-show="active" class="w-full h-full active absolute rd-1.4"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Size } from '@/typing';
import { formatRatioToText, ratioVal } from '../useCreate';

const props = defineProps<{ ratio: Size; active?: boolean }>()
const ratioText = computed(() => {
  return formatRatioToText(props.ratio)
})
const classObj = computed(() => {
  let str = ''
  if (ratioVal(props.ratio) >= 1) str += 'w-60%'
  else str += 'h-60%'
  return str
})
</script>

<style scoped>
.active {
  border: 3px solid var(--color-primary);
}
.activeText {
  color: var(--color-primary);
}
</style>
